<template>
    <view :class="uiStyle == 1 ? '' : 'uiStyle'">
        <!-- pages/newParklist/newParklist.wxml -->
        <!-- <topBar text="车位市场" :needBack="true"></topBar> -->
		<view class="head-block" v-if="weixin == 2">
				     <view class="nav-title" :style="'top:10px'"></view>
					 <!-- 返回 -->
					 <view class="icon" @tap="goMy" :style="'top:6px'">
					      <van-icon name="arrow-left" color="#333" size="45rpx" />
					  </view>
		</view>
        <view class="detail">
            <view class="topcard">
                <view class="top-item">
                    <text class="top-text-h1">
                        {{ parkingName || '--' }}
                        <text style="font-family: SourceHanSansCN-Medium; font-size: 24rpx; color: #6e6e6e; font-weight: 500">（小区业主自主定价）</text>
                    </text>
                </view>
            </view>

            <view>
                <view class="tab-card" style="position: relative">
					<view :class="'tab-left ' + (active == 0 ? 'selected' : '')" @tap="onchangeTab" data-data="0">
					    临停预约
					    <view v-if="active == 0" class="tab-line"></view>
					</view>
                    <view :class="'tab-right ' + (active == 1 ? 'selected' : '')" @tap="onchangeTab" data-data="1">
                        包月预约
                        <view v-if="active == 1" class="tab-line"></view>
                    </view>

                </view>
                <van-dropdown-menu style="width: 100%; display: block; position: relative; right: 0rpx; left: 65%;height: 60rpx;margin-top: 30rpx;" @tap.native.stop.prevent="hidebg">
                    <van-dropdown-item @change="change3" v-model="topvalue3" :options="topoption3" style='line-height: 60rpx;' />
                </van-dropdown-menu>
                <view v-if="active == 0">
                    <view class="notice-bar" v-if="rules1.productDesc">
                        <!-- <van-notice-bar id="notice1" background="#FFF7EB" text="{{rules1.productName+rules1.unitPrice/100+'元/小时，'+rules1.productDesc }}" speed="30">
          <view slot="left-icon">
            <image src="../parkDetail/img/tip.png" class="img-tip"></image
			>
          </view>
        </van-notice-bar> -->
                    </view>
                    <view v-if="list1 && list1.length > 0">
                        <view v-for="(item, index) in list1" :key="item.spaceNo">
                            <view class="card" @tap="reservePark" :data-data="item">
                                <image class="swiperBg" src="../../static/assets/img/card-lv-hover.png"></image>

                                <view class="card-order-l-t new-blt">
                                    <view class="flex-rows">
                                        <view class="row-title">车位号：</view>
                                        <view class="row-text1">{{ item.spaceNo }}</view>
                                    </view>
                                    <view class="flex-rows" v-if="item.realTime == '全部时间开放预约'">
                                        <view class="row-title">全部时间开放预约</view>
                                    </view>
                                    <view v-else>
                                        <view class="flex-rows">
                                            <view class="row-title">共享日期：</view>
                                            <view>
                                                <view class="row-text1">{{ item.validStartTimeDesc }}-{{ item.validEndTimeDesc }}</view>
                                                <view class="row-text1">{{ item.tempCycleDesc }}</view>
                                            </view>
                                        </view>
                                        <view class="flex-rows">
                                            <view class="row-title">价格：</view>
                                            <view class="row-text1-num">{{ item.unitPrice / 100 }}元/次</view>
                                        </view>
										<view class="row-text2" v-if="item.haveCharge">
										    <view>（本车位可提供充电服务，费用双方自行商议）</view>
										    <!-- <view>（国标/特斯拉专用）</view> -->
										</view>
                                    </view>
                                    <view class="flex-rows">
                                        <view class="row-title">共享时段：</view>
                                        <view class="row-text1">{{ item.tempStartTime }} - {{ item.tempEndTime }}</view>
                                    </view>
                                    <view class="statu" style="display: flex; margin: 15rpx 0; min-height: 34rpx">
                                        <view class="statuView" v-if="item.haveCharge">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/elc.png" />
                                            有充电桩
                                        </view>
                                        <view class="statuView" v-if="item.spaceType == 2">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/under.png" />
                                            地下
                                        </view>
                                        <view class="statuView" v-if="item.spaceType == 1">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/ground.png" />
                                            地面
                                        </view>
                                        <view class="statuView" v-if="item.spaceType == 3">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/3dpark.png" />
                                            立体车库
                                        </view>
                                    </view>
                                    <van-rate readonly :size="15" v-model="item.evaluate" color="#ffd21e" void-icon="star" void-color="#eee" />
                                </view>
                                <view>
                                    <view
                                        :class="'parkrecommend ' + (item.focus == 1 ? 'like1' : 'nolike1')"
                                        :data-item="item"
                                        :data-index="index"
                                        :data-isFocus="item.focus"
                                        :data-id="item.id"
                                        @tap.stop.prevent="likeThisPark"
                                    >
                                        {{ item.focus == 1 ? '已关注' : '+关注' }}
                                    </view>
                                    <view
                                        class="concant"
                                        :data-item="item"
                                        :data-index="index"
                                        :data-id="item.parkingCode"
                                        @tap.stop.prevent="gotoMessage"
                                        :data-url="'../socks/socks?manageId=' + item.manageId + '&recipientUserId=' + item.identityId + '&otherName=' + item.manageName"
                                    >
                                        <image src="../../static/assets/img/message.png" class="img-msg"></image>
                                        现在沟通
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else>
                        <view class="nopark">
                            <image src="../../static/assets/img/empty.png"></image>
                        </view>
                        <view class="text">暂无车位</view>
                    </view>
                </view>
                <view v-if="active == 1">
                    <view v-if="list2 && list2.length > 0">
                        <view style="margin-bottom: 40rpx" v-for="(item, index) in list2" :key="index">
                            <view class="card" @tap="monthLyPark" :data-data="item">
                                <image class="swiperBg" src="../../static/assets/img/card-lv-hover.png" style="height: 316rpx"></image>
                                <view class="card-order-l-t new-blt">
                                    <view class="flex-rows">
                                        <view class="row-title">车位号：</view>
                                        <view class="row-text1">{{ item.spaceNo }}</view>
                                    </view>
                                    <view class="flex-rows" v-if="item.startTime == '租赁期限不限'">
                                        <view class="row-title">租赁期限：</view>
                                        <view class="row-text1">不限</view>
                                    </view>
                                    <view class="flex-rows" v-else>
                                        <view class="row-title">共享日期：</view>
                                        <view class="row-text1">{{ item.startChineseTime }}-{{ item.endChineseTime }}</view>
                                    </view>
                                    <view class="flex-rows">
                                        <view class="row-title">价格：</view>
                                        <view class="row-text1-num">{{ item.unitPrice / 100 }}元/月</view>
    
                                    </view>
									<view class="row-text2" v-if="item.haveCharge">
									    <view>（本车位可提供充电服务，费用双方自行商议）</view>
									    <!-- <view>（国标/特斯拉专用）</view> -->
									</view>
                                    <!-- <view class="flex-rows">
                <view class="row-title">价   格：</view>
                <view class="row-text1">{{item.unitPrice/100}}元/月</view>
              </view> -->
                                    <!-- <view class="card-order-spnum">
                <view class="spnum-fixtext">车 位 号: <text class="p-nums">{{item.spaceNo}}</text></view>
              </view> -->

                                    <!-- <view class="card-book" wx:if="{{item.startTime == '租赁期限不限'}}">
                <view class="book-t">租赁期限</view>
                <view class="book-c">不限</view>
              </view>
              <view class="card-book" wx:else>
                <view class="book-t"><text class="book-c" style="">共享时间段:</text><text class="book-c">{{item.startChineseTime}}-{{item.endChineseTime}}</text></view>
              </view>
              <view class="card-order-spnum">
                <view class="spnum-fixtext">价  格: <text class="spnum-num"> {{item.unitPrice/100}}元/月</text></view>
              </view> -->
                                    <!-- <view class="card-order-spname">{{item.parkingName}}</view> -->
                                    <view class="statu" style="display: flex; margin: 10rpx 0; min-height: 34rpx">
                                        <view class="statuView" v-if="item.haveCharge">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/elc.png" />
                                            有充电桩
                                        </view>
                                        <view class="statuView" style="margin-left: 20rpx" v-if="item.spaceType == 2">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/under.png" />
                                            地下
                                        </view>
                                        <view class="statuView" style="margin-left: 20rpx" v-if="item.spaceType == 1">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/ground.png" />
                                            地面
                                        </view>
                                        <view class="statuView" style="margin-left: 20rpx" v-if="item.spaceType == 3">
                                            <image class="img-tag" mode="widthFix" src="../../static/assets/img/3dpark.png" />
                                            立体车库
                                        </view>
                                    </view>
                                    <view>
                                        <van-rate readonly :size="15" v-model="item.evaluate" color="#ffd21e" void-icon="star" void-color="#eee" />
                                        <!-- <text class="tip2">预约后可见车主联系方式</text> -->
                                    </view>
                                    <view
                                        :class="'parkrecommend ' + (item.focus == 1 ? 'like1' : 'nolike1')"
                                        :data-item="item"
                                        :data-index="index"
                                        :data-isFocus="item.focus"
                                        :data-id="item.id"
                                        @tap.stop.prevent="likeThisPark"
                                    >
                                        {{ item.focus == 1 ? '已关注' : '+关注' }}
                                    </view>
                                    <view
                                        class="concant"
                                        :data-item="item"
                                        :data-index="index"
                                        :data-id="item.parkingCode"
                                        @tap.stop.prevent="gotoMessage"
                                        :data-url="'../socks/socks?manageId=' + item.manageId + '&recipientUserId=' + item.identityId + '&otherName=' + item.manageName"
                                    >
                                        <image src="../../static/assets/img/message.png" class="img-msg"></image>
                                        现在沟通
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else>
                        <view class="nopark">
                            <image src="../../static/assets/img/empty.png"></image>
                        </view>
                        <view class="text">暂无车位</view>
                    </view>
                </view>
                <!-- </van-tab>
    </van-tabs> -->
            </view>
            <view v-if="false">
                <map class="map" id="mymap"></map>
            </view>
            <van-toast id="van-toast" />
        </view>
    </view>
</template>
<script module="filters" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
// import vanNoticeBar from '@vant/weapp/notice-bar/index';
// pages/newParklist/newParklist.js
import api from './../../utils/api.js';
import util from './../../utils/util.js';
export default {
    components: {
        // vanNoticeBar
    },
    data() {
        return {
            list1: [],
            list2: [],
            active: 0,
            datas: {},
            //前一页面传参
            rules1: {
                productDesc: ''
            },
            //临停预约的规则-自行拼接
            rules2: '',
			weixin:uni.getStorageSync('weixin'),
            //自行拼接
            communityList: [],
            parkingCode: '',
            parkingName: '',
            topvalue3: '0',
            topoption3: [
                {
                    text: '按价格排序',
                    value: '0'
                }
            ],
			uiStyle:1
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options);
		this.uiStyle = uni.getStorageSync('uiStyle') || 1
        if (options.parkingcode) {
            this.setData({
                parkingCode: options.parkingcode
            });
        }

        if (options.active) {
            this.setData({
                active: options.active
            });
        }

        if (this.active == 1) {
            this.getMonthList();
        } else {
            this.getTempList();
        } // this.getUnitSpaceList()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // if (this.active == 0) {
        //     this.getTempList();
        // } else if (this.active == 1) {
        //     this.getMonthList();
        // }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        change3() {},
		goMy() {
		     uni.navigateBack({
		         delta: 1
		     });
		 },
        likeThisPark(event) {
            //关注车场
            let that = this;
            console.log('即将关注或取消id为：' + event.currentTarget.dataset.id);

            if (event.currentTarget.dataset.id) {
                let type = event.currentTarget.dataset.isfocus == 1 ? 2 : 1; //1关注，2取消关注

                util.request(api.manageAddOrUpdateFocus + '?unionId=' + uni.getStorageSync('unionId') + '&manageId=' + event.currentTarget.dataset.id + '&type=' + type, 'get')
                    .then((res) => {
                        if (res.success) {
                            if (event.currentTarget.dataset.isfocus == 1) {
                                //取消关注成功
                                event.currentTarget.dataset.item.focus = 0;
                                uni.showToast({
                                    title: '取消关注成功'
                                });
                            } else if (event.currentTarget.dataset.isfocus == 0) {
                                //添加关注成功
                                event.currentTarget.dataset.item.focus = 1;
                                uni.showToast({
                                    title: '关注成功'
                                });
                                uni.requestSubscribeMessage({
                                    tmplIds: ['G-qqlo3c5ARPqg9lPCnCrSUxAEgZ8bPfrEpd0UVE-8o'],

                                    success(sus) {},

                                    fail(err) {}
                                });
                            }

                            if (this.active == 0) {
                                this.getTempList();
                            } else if (this.active == 1) {
                                this.getMonthList();
                            }
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },

        onchangeTab(e) {
            let data = e.currentTarget.dataset.data;
            this.setData({
                active: data
            });

            if (data == 0) {
                this.getTempList();
            } else if (data == 1) {
                this.getMonthList();
            }
        },

        /**
         * 获取预约列表
         */
        getTempList() {
            let param = {
                parkingCode: this.parkingCode,
                personUnionId: uni.getStorageSync('unionId'),
                pageNumber: 1,
                pageSize: 100
            };
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.tempParklotList, param, 'POST', 'application/json')
                .then((res) => {
                    uni.hideLoading();
                    if (res.success) {
                        this.setData({
                            parkingName: res.data.parkingName,
                            list1: res.data.data.content,
                            rules1: res.data.product || []
                        });
                    } else {
                        Toast(res.msg || '接口出错了，请稍后再试');
                    }
                })
                .catch((err) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err || '接口出错了，请稍后再试',
                        icon: 'none'
                    });
                });
        },

        /**
         * 获取包月列表
         */
        getMonthList() {
            let param = {
                parkingCode: this.parkingCode,
                personUnionId: uni.getStorageSync('unionId'),
                pageNumber: 1,
                pageSize: 100
            };
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.monthlyParklotList, param, 'POST')
                .then((res) => {
                    if (res.success) {
                        for (var i = 0; i < res.data.data.content.length; i++) {
                            res.data.data.content[i].manageId = res.data.data.content[i].id;
                        }
                        this.setData({
                            parkingName: res.data.parkingName,
                            list2: res.data.data.content // rules2:res.data.product[0] || []
                        });
                    } else {
                        uni.showToast({
							title:res.msg,
							icon:'none'
						});
                    }

                    uni.hideLoading();
                })
                .catch((err) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err || '接口出错了，请稍后再试',
                        icon: 'none'
                    });
                });
        },

        //查询已审核通过的小区
        getUnitSpaceList() {
            let param = {
                userUnionId: uni.getStorageSync('unionId')
            };
            util.request(api.getUnitspaceList, param, 'GET')
                .then((res) => {
                    if (res.success) {
                        let listdata = [];

                        if (res.data && res.data.length > 0) {
                            res.data.map((item) => {
                                if (item.unitAuthStatus == 1) {
                                    listdata.push(
                                        Object.assign({}, item, {
                                            text: item.parkingName
                                        })
                                    );
                                }
                            });
                            let lists = JSON.stringify(this.delObj(listdata)); // console.log(listdata)
                        }

                        this.setData({
                            communityList: listdata,
                            parkingCode: listdata[0].parkingCode,
                            parkingName: listdata[0].parkingName
                        });
                        this.getMonthList();
                    } else {
                        uni.showToast({
                            title: res.msg || '接口出错了...',
                            icon: 'none'
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    uni.showToast({
                        title: '接口出错了',
                        icon: 'none'
                    });
                });
        },

        // 点击卡片
        choosePark(e) {
            console.log(e);
            this.setData({
                parkingCode: e.currentTarget.dataset.data.parkingCode,
                parkingName: e.currentTarget.dataset.data.parkingName,
                active: 0
            });
            this.getTempList();
        },

        //留言咨询
        gotoMessage(e) {
            console.log(e.currentTarget.dataset);
            const identityId = uni.getStorageSync('identityId');
            let recipientUserId = e.currentTarget.dataset.item.identityId;

            if (identityId == recipientUserId) {
                uni.showToast({
                    title: '抱歉，这个车位为你自己的车位！',
                    icon: 'none'
                });
                return;
            }

            let url = e.currentTarget.dataset.url;
            uni.navigateTo({
                url
            });
        },

        // 点击去预约
        reservePark(e) {
            let data = e.currentTarget.dataset.data;
            uni.navigateTo({
                url: '../newBookparkPerson/newBookparkPerson?param=' + this.parkingCode + '&spaceNo=' + data.spaceNo + '&focus=' + data.focus + '&type=2' + '&spaceNoId=' + data.id
            });
        },

        // 点击去包月
        monthLyPark(e) {
            console.log(e);
            let data = e.currentTarget.dataset.data;
            uni.navigateTo({
                url: '../newMonthpark/newMonthpark?param=' + this.parkingCode + '&spaceNo=' + data.spaceNo + '&focus=' + data.focus + '&type=1' + '&spaceNoId=' + data.id
            });
        },

        delObj(list) {
            let keys = [];
            let item;
            for (let a = list.length - 1; a >= 0; a--) {
                item = list[a];

                if (keys.some((t) => t === item.parkingCode)) {
                    list.splice(a, 1);
                } else {
                    keys.push(item.parkingCode);
                }
            }

            return list;
        },

        hidebg() {
            console.log('占位：函数 hidebg 未声明');
        }
    }
};
</script>
<style>
@import './newParklist.css';
</style>
